<template>
  <el-button-group>
    <el-tooltip
      class="item"
      effect="dark"
      :content="label[item + (choose[item] ? '-open' : '')]"
      placement="top"
      :enterable="false"
      v-for="(item, i) in list"
      :key="i"
    >
      <!-- v-show="item !== 'card'" -->
      <el-button
        :class="{
          active: choose[item],
        }"
        :icon="`el-icon-${icon[item]}`"
        @click="click(item)"
      ></el-button>
    </el-tooltip>
    <el-dropdown
      :class="{
        active: showMenu,
      }"
      trigger="click"
      :hide-on-click="false"
      v-if="row"
      @visible-change="dropChange"
      @command="clickItem"
      ><el-tooltip
        class="item"
        effect="dark"
        content="表头数据"
        placement="top"
        :enterable="false"
      >
        <el-button icon="el-icon-s-operation"
          ><i class="el-icon-caret-bottom el-icon--right"></i
        ></el-button>
      </el-tooltip>
      <el-dropdown-menu slot="dropdown" class="troila-popper">
        <el-scrollbar class="troila-btnGroup-popper">
          <el-dropdown-item
            :class="{
              active: rowChoose.indexOf(item.code) > -1,
            }"
            :icon="
              rowChoose.indexOf(item.code) > -1
                ? 'el-icon-check troila-choose'
                : null
            "
            :command="item"
            v-for="item in row"
            :key="item.code"
            >{{ item.label }}</el-dropdown-item
          >
        </el-scrollbar>
      </el-dropdown-menu>
    </el-dropdown>
  </el-button-group>
</template>

<script>
export default {
  name: 'selectGroup',
  props: {
    value: {
      type: Object,
      default() {
        return {
          search: true,
          card: false,
        }
      },
    },
    row: {
      type: Array,
      default: [],
    },
    rowChoose: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      icon: {
        search: 'search',
        refresh: 'refresh',
        card: 'files',
      },
      label: {
        search: '展开搜索',
        'search-open': '关闭搜索',
        refresh: '刷新列表',
        'refresh-open': '刷新列表',
        card: '切换为卡片',
        'card-open': '切换为表格',
      },
      choose: { ...this.value },
      showMenu: false,
    }
  },
  computed: {
    list() {
      let list = Object.keys(this.value)
      return list ? list : []
    },
  },
  watch: {
    choose: {
      deep: true,
      handler(v) {
        this.$emit('input', v)
      },
    },
  },
  methods: {
    click(item) {
      // console.log(item);
      switch (item) {
        case 'search':
        case 'card':
          this.choose[item] = !this.choose[item]
          break
        case 'refresh':
          this.$emit('refresh')
      }
    },
    clickItem(item) {
      let arr = [...this.rowChoose]
      arr.indexOf(item.code) > -1
        ? arr.length == 1
          ? this.$alertFn.error(`至少选择一列表头数据`)
          : arr.splice(arr.indexOf(item.code), 1)
        : arr.push(item.code)
      // console.log(arr)
      this.$emit('rowChange', arr)
    },
    dropChange(judge) {
      this.showMenu = judge
    },
  },
}
</script>
<style scoped>
</style>
